<template>
  <div class="policy-page w">
        <el-card class="box-card" shadow="hover">
          <template #header>
            <el-page-header @back="router.back()">
              <template #title>
                <el-text size="large" tag="b">Policies</el-text>
              </template>
              <template #content>
                <el-text size="large" type="primary" tag="b">Refund Policy</el-text>
              </template>
            </el-page-header>
          </template>
          
          <div class="policy-content">
            <div class="section-content">
              <el-steps :active="3" finish-status="success">
                <el-step title="Return Request" description="Submit within 30 days" />
                <el-step title="Item Inspection" description="Quality check" />
                <el-step title="Refund Process" description="5-10 business days" />
              </el-steps>
            </div>

            <h2>1. Return Period</h2>
            <div class="section-content">
              <el-card shadow="never" class="info-card">
                <template #header>
                  <div class="card-header">
                    <el-icon><Timer /></el-icon>
                    <h3>30-Day Return Window</h3>
                  </div>
                </template>
                <div class="policy-text">
                  We offer a 30-day return period for most items. To be eligible for a return, your item must be unused and in the same condition that you received it.
                </div>
                <el-tag class="mt-3" type="warning">Conditions Apply</el-tag>
              </el-card>
            </div>

            <h2>2. Refund Process</h2>
            <div class="section-content">
              <el-timeline>
                <el-timeline-item
                  timestamp="Step 1"
                  type="primary"
                  size="large"
                >
                  <h4>Return Reception</h4>
                  <p>We receive and log your returned item</p>
                </el-timeline-item>
                <el-timeline-item
                  timestamp="Step 2"
                  type="warning"
                  size="large"
                >
                  <h4>Item Inspection</h4>
                  <p>Our team inspects the returned item's condition</p>
                </el-timeline-item>
                <el-timeline-item
                  timestamp="Step 3"
                  type="success"
                  size="large"
                >
                  <h4>Refund Issuance</h4>
                  <p>Refund is processed to original payment method</p>
                </el-timeline-item>
              </el-timeline>
            </div>

            <h2>3. Shipping Information</h2>
            <div class="section-content">
              <el-descriptions
                title="Shipping Details"
                :column="1"
                border
              >
                <el-descriptions-item label="Return Shipping Cost">
                  <el-tag type="danger">Customer Responsibility</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="Shipping Refund">
                  Original shipping costs are non-refundable
                </el-descriptions-item>
                <el-descriptions-item label="Tracking">
                  Please keep your return shipping tracking number
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <el-divider>Need Help?</el-divider>

            <div class="contact-section">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-statistic title="Processing Time" :value="10">
                    <template #suffix>business days</template>
                    <template #prefix>
                      <el-icon><Clock /></el-icon>
                    </template>
                  </el-statistic>
                </el-col>
                <el-col :span="12">
                  <el-button type="primary" @click="router.push('/contact')" class="contact-button">
                    <el-icon><Service /></el-icon>
                    Contact Support
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Timer, Clock, Service } from '@element-plus/icons-vue'

const router = useRouter()
</script>

<style scoped>
.policy-page {
    padding: 20px 0;
  background-color: var(--el-bg-color-page);
}

.policy-content {
  padding: 20px 0;
}

.section-content {
  margin: 20px 0 40px;
}

h2 {
  color: var(--el-text-color-primary);
  margin-top: 30px;
}

h3 {
  margin: 0;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

.policy-text {
  line-height: 1.8;
  margin: 10px 0;
  color: var(--el-text-color-regular);
}

.info-card {
  border: 1px solid var(--el-border-color-light);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-header .el-icon {
  color: var(--el-color-primary);
}

.mt-3 {
  margin-top: 12px;
}

.contact-section {
  text-align: center;
  margin-top: 40px;
}

.contact-button {
  width: 100%;
  margin-top: 20px;
}

:deep(.el-page-header__title) {
  margin-right: 20px;
}

:deep(.el-timeline-item__content h4) {
  margin: 0;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

:deep(.el-timeline-item__content p) {
  margin: 8px 0 0;
  color: var(--el-text-color-regular);
}
</style> 